/**
 * 新手指引工具方法
 */
import { ElMessage } from 'element-plus'
import IntroJs from 'intro.js'
export interface Step {
    element: HTMLElement | string // 元素id或实例
    intro: string // 引导语
    position: "right" | "left" | "top" | "bottom" // 引导标签位置
}
const start = (curIntro: IntroJs.IntroJs, steps: Step[]) => {
    // 设置
    curIntro.setOptions(setOption(steps))
    // 开始
    curIntro.start()
}
const setOption = (steps: Step[]) => {
    return {
        prevLabel: `上一步`,
        nextLabel: `下一步`,
        skipLabel: `跳过`,
        doneLabel: `完成`,
        tooltipPosition: `bottom` /* 引导说明框相对高亮说明区域的位置 */,
        hidePrev: true, // 隐藏第一步中的上一个按钮
        tooltipClass: `guideText` /* 引导说明文本框的样式 */,
        highlightClass: `guideLight` /* 说明高亮区域的样式 */,
        exitOnOverlayClick: false /* 是否允许点击空白处退出 */,
        showStepNumbers: false /* 是否显示说明的数据步骤*/,
        keyboardNavigation: false /* 是否允许键盘来操作 */,
        showButtons: true /* 是否按键来操作 */,
        showBullets: true /* 是否使用点点点显示进度 */,
        showProgress: false /* 是否显示进度条 */,
        scrollToElement: true /* 是否滑动到高亮的区域 */,
        overlayOpacity: 0.5 /* 遮罩层的透明度 */,
        positionPrecedence: [`bottom`, `top`, `right`, `left`] /* 当位置选择自动的时候，位置排列的优先级 */,
        disableInteraction: false, /* 是否禁止与元素的相互关联 */
        hintPosition: 'top-middle',
        steps: steps
    }
}
export const guideInstance = (steps: Step[]) => {
    if (!steps || steps.length === 0) {
        ElMessage.error("未传入步骤！")
        return
    }
    const curIntro = IntroJs()

    return {
        start: start(curIntro, steps)
    }
}
